<template>
  <div>
    <div class="pay-container">
      <Alert show-icon>
        扫码支付
        <Icon type="qr-scanner" slot="icon"></Icon>
        <template slot="desc">请扫描右边二维码进行支付</template>
      </Alert>
      <div class="pay-box">
        <div class="pay-demo">
          <img src="static/img/pay/pay-demo.png">
        </div>
        <div class="pay-qr-scan">
          <img :src="'data:image/jpeg;base64,'+ qrcode" alt="付款二维码">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request';

export default {
  name: 'Pay',
  data () {
    return {
      userId: this.$route.params.userId,
      orderId: this.$route.params.orderId,
      qrcode: null,
      stimer: null,
      count: 0
    };
  },
  created () {
    this.getQrcode();
    // this.paycallback();
    this.fakePayFinish();
  },
  methods: {
    getQrcode () {
      return new Promise((resolve, reject) => {
        request({
          url: '/alipay/pay',
          method: 'get',
          params: {
            userId: this.userId,
            orderId: this.orderId
          }
        }).then((value) => {
          this.qrcode = value.data;
        });
      });
    },
    fakePayFinish () {
      clearTimeout(this.stimer); // 清除延迟执行

      this.stimer = setTimeout(() => { // 设置延迟执行
        this.fakePay();
      }, 20000);
    },
    fakePay () {
      return new Promise((resolve, reject) => {
        request({
          url: '/alipay/fakePay',
          method: 'post',
          params: {
            orderId: this.orderId
          }
        }).then(() => {
          this.$router.push({name: 'PayDone'});
        });
      });
    }

    // callbackOnce () {
    //   return new Promise((resolve, reject) => {
    //     request({
    //       url: '/order/callback',
    //       method: 'post',
    //       params: {
    //         userId: this.userId,
    //         orderId: this.orderId
    //       }
    //     }).then((res) => {
    //       if (res.code === 200) {
    //         alert('支付成功!!!');
    //         if (this.stimer) clearInterval(this.stimer);
    //       }
    //     });
    //   });
    // },
    // paycallback () {
    //   var that = this;
    //   if (that.count > 20) {
    //     if (that.stimer) clearInterval(that.stimer);
    //     return;
    //   }
    //   if ()
    //   // webscoket
    //   that.stimer = setInterval(function () {
    //     that.count++;
    //     that.callbackOnce();
    //   }, 3000);
    // }
  }
};
</script>

<style scoped>
.pay-container {
  margin: 15px auto;
  width: 80%;
  min-width: 1000px;
}

.pay-box {
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pay-demo {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pay-demo img {
  height: 80%;
}

.pay-qr-scan {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pay-tips {
  width: 50%;
  text-align: center;
  font-size: 14px;
  line-height: 30px;
}

.pay-tips a {
  color: #999999;
}
</style>
